<template>
  <view class="container">
    <!-- 银行卡列表 -->
    <view v-for="(card, index) in tableData" :key="index" class="bank-card">
      <view class="card-content">
        <!-- 银行Logo和信息 -->
        <!--<image class="bank-logo" :src="card.logo" />-->
        <view class="card-info">
          <text class="bank-name">{{ card.bank_name }}</text>
          <text class="card-number">{{ card.card_no }}</text>
          <text class="card-details">
            持卡人: {{ card.b_name }}  手机号: {{ card.phone }}
          </text>
        </view>
      </view>
      <!-- 按钮 -->
      <view class="card-actions">
        <button class="action-btn delete" @click="deleteCard(card.id)">删除</button>
        <button class="action-btn edit" @click="editCard(card.id)">编辑</button>
      </view>
    </view>
	<!-- 没有记录 -->
	<view class="d-c-c p30" v-if="tableData.length == 0 && !loading">
		<text class="iconfont icon-wushuju"></text>
		<text class="cont">亲，暂无相关记录哦</text>
	</view>

    <!-- 底部新增账户按钮 -->
    <view class="add-account-btn" @click="gotoPage('/pages/agent/bank/add')">
      新增账户
    </view>
  </view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
  data() {
    return {
		/*是否加载完成*/
		loading: true,
		/*顶部刷新*/
		topRefresh: false,
		/*手机高度*/
		phoneHeight: 0,
		/*可滚动视图区域高度*/
		scrollviewHigh: 0,
		/*数据列表*/
		tableData: [],
		/*最后一页码数*/
		last_page: 0,
		/*当前页面*/
		page: 1,
		/*每页条数*/
		list_rows: 20,
		no_more: false,
      // 银行卡数据
      tableData: [],
    };
  },
  onLoad() {
  	/*获取数据*/
  	this.getData();
  },
  onShow() {
  	
  },
  onReachBottom() {
  	let self = this;
  	if (self.page < self.last_page) {
  		self.page++;
  		self.getData();
  	}
  	self.no_more = true;
  },
  methods: {
	  /*获取数据*/
	  getData() {
	  	let self = this;
	  	let page = self.page;
	  	let list_rows = self.list_rows;
	  	self.loading = true;
	  	self._get(
	  		'user.user/banklists', {
	  			page: page || 1,
	  			list_rows: list_rows,
	  		},
	  		function(data) {
	  			self.loading = false;
	  			self.tableData = data.data.list.data;
	  			self.last_page = data.data.list.last_page;
	  			if (data.data.list.last_page <= 1) {
	  				self.no_more = true;
	  				return false;
	  			}
	  		}
	  	);
	  },
    // 删除银行卡
    deleteCard(index) {
		let self = this;
		uni.showModal({
		        title: '友情提示！',
		        content: '确定要删除吗？',
		        showCancel: true,
		        cancelText: '取消',
		        confirmText: '删除',
		        success: (res) => {
		          if (res.confirm) {
		            self._post('user.user/delBank', {id:index}, function(res) {
		            	uni.hideLoading();
		            		if(res.code == 1){
		            			self.showSuccess(res.msg,() => {
		            				self.getData()
		            			});
		            		}else{
		            			self.showError(res.msg, () => {
		            				
		            			});
		            		}
		            });
		          } else {
		            console.log('取消删除');
		          }
		        },
		      });
      
    },
    // 编辑银行卡
    editCard(index) {
		let url = '/pages/agent/bank/add?id='+index	
		this.gotoPage(url)
    },
  },
};
</script>

<style scoped>
/* 页面整体容器 */
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f7f7f7;
}

/* 顶部导航栏 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: white;
  border-bottom: 1px solid #e5e5e5;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.menu-icon {
  font-size: 20px;
}

/* 银行卡卡片 */
.bank-card {
  background: linear-gradient(to right, #ff8c42, #ff69b4);
  margin: 5px 10px;
  border-radius: 10px;
  padding: 15px;
  color: white;
  position: relative;
}

.card-content {
  display: flex;
  flex-direction: row;
}

.bank-logo {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 5px;
}

.card-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.bank-name {
  font-size: 16px;
  font-weight: bold;
}

.card-number {
  font-size: 14px;
  margin-top: 5px;
}

.card-details {
  font-size: 12px;
  margin-top: 5px;
}

/* 卡片按钮 */
.card-actions {
  position: absolute;
  top: 5px;
  right: 15px;
  display: flex;
  flex-direction: column;
}

.action-btn {
  margin-top: 5px;
  border-radius: 5px;
  font-size: 14px;
}

.delete {
  background-color: #ff4d4f;
  color: white;
}

.edit {
  background-color: #1890ff;
  color: white;
}

/* 底部新增账户按钮 */
.add-account-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ff69b4;
  color: white;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  border-radius: 10px 10px 0 0;
}
</style>
